import { EllipsisOutlined } from '@ant-design/icons';
import { Col, Dropdown, Menu, Row } from 'antd';
import React, { Component, Suspense } from 'react';
import { GridContent } from '@ant-design/pro-layout';
import { connect } from 'dva';
import PageLoading from './components/PageLoading';
import { getTimeDistance } from './utils/utils';
import styles from './style.less';

const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
const SalesCard = React.lazy(() => import('./components/SalesCard'));
const TopSearch = React.lazy(() => import('./components/TopSearch'));
const ProportionSales = React.lazy(() => import('./components/ProportionSales'));
const OfflineData = React.lazy(() => import('./components/OfflineData'));

class DashboardAnalysis extends Component {
    state = {
        salesType: 'all',
        currentTabKey: '',
        rangePickerValue: getTimeDistance('year'),
    };

    reqRef = 0;

    timeoutId = 0;

    componentDidMount() {
        const { dispatch } = this.props;
        this.reqRef = requestAnimationFrame(() => {
            dispatch({
                type: 'dashboardAnalysis/fetch',
            });
        });
    }

    componentWillUnmount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'dashboardAnalysis/clear',
        });
        cancelAnimationFrame(this.reqRef);
        clearTimeout(this.timeoutId);
    }

    handleChangeSalesType = e => {
        this.setState({
            salesType: e.target.value,
        });
    };

    handleTabChange = key => {
        this.setState({
            currentTabKey: key,
        });
    };

    handleRangePickerChange = rangePickerValue => {
        const { dispatch } = this.props;
        this.setState({
            rangePickerValue,
        });
        dispatch({
            type: 'dashboardAnalysis/fetchSalesData',
        });
    };

    selectDate = type => {
        const { dispatch } = this.props;
        this.setState({
            rangePickerValue: getTimeDistance(type),
        });
        dispatch({
            type: 'dashboardAnalysis/fetchSalesData',
        });
    };

    isActive = type => {
        const { rangePickerValue } = this.state;

        if (!rangePickerValue) {
            return '';
        }

        const value = getTimeDistance(type);

        if (!value) {
            return '';
        }

        if (!rangePickerValue[0] || !rangePickerValue[1]) {
            return '';
        }

        if (
            rangePickerValue[0].isSame(value[0], 'day') &&
            rangePickerValue[1].isSame(value[1], 'day')
        ) {
            return styles.currentDate;
        }

        return '';
    };

    render() {
        const { rangePickerValue, salesType, currentTabKey } = this.state;
        const { dashboardAnalysis, loading } = this.props;
        const {
            visitData,
            toolInfo,
            useInfo,
            failureInfo,
            scrapInfo,
            useHistory,
            userInfo,
            toolStatusInfo,
            tDefUseRank,
        } = dashboardAnalysis;

        const toolIntroduceInfo = {
            toolInfo,
            useInfo,
            failureInfo,
            scrapInfo,
        }

        const menu = (
            <Menu>
                <Menu.Item>操作一</Menu.Item>
                <Menu.Item>操作二</Menu.Item>
            </Menu>
        );
        const dropdownGroup = (
            <span className={styles.iconGroup}>
                <Dropdown overlay={menu} placement="bottomRight">
                    <EllipsisOutlined />
                </Dropdown>
            </span>
        );
        return (
            <GridContent>
                <React.Fragment>
                    <Suspense fallback={<PageLoading />}>
                        <IntroduceRow
                            loading={loading}
                            visitData={visitData}
                            toolIntroduceInfo={toolIntroduceInfo} />
                    </Suspense>

                    <Suspense fallback={null}>
                        <SalesCard
                            rangePickerValue={rangePickerValue}
                            salesData={useHistory}
                            isActive={this.isActive}
                            handleRangePickerChange={this.handleRangePickerChange}
                            loading={loading}
                            rank={tDefUseRank}
                            selectDate={this.selectDate}
                        />
                    </Suspense>

                    <Row
                        gutter={24}
                        style={{
                            marginTop: 24,
                        }}
                    >
                        {/* <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                            <Suspense fallback={null}>
                                <TopSearch
                                    loading={loading}
                                    visitData2={visitData2}
                                    searchData={searchData}
                                    dropdownGroup={dropdownGroup}
                                />
                            </Suspense>
                        </Col> */}
                        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                            <Suspense fallback={null}>
                                <ProportionSales
                                    title="员工类别占比"
                                    secondTitle="员工权限分布"
                                    circleTitle="员工总数"
                                    dropdownGroup={dropdownGroup}
                                    salesType={salesType}
                                    loading={loading}
                                    salesPieData={userInfo}
                                    unit="人"
                                    handleChangeSalesType={this.handleChangeSalesType}
                                />
                            </Suspense>
                        </Col>
                        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                            <Suspense fallback={null}>
                                <ProportionSales
                                    title="夹具当前状态占比"
                                    secondTitle="当前状态分布"
                                    circleTitle="夹具总数"
                                    dropdownGroup={dropdownGroup}
                                    salesType={salesType}
                                    loading={loading}
                                    unit="个"
                                    salesPieData={toolStatusInfo}
                                    handleChangeSalesType={this.handleChangeSalesType}
                                />
                            </Suspense>
                        </Col>
                    </Row>

                    {/* <Suspense fallback={null}>
            <OfflineData
              activeKey={activeKey}
              loading={loading}
              offlineData={offlineData}
              offlineChartData={offlineChartData}
              handleTabChange={this.handleTabChange}
            />
          </Suspense> */}
                </React.Fragment>
            </GridContent>
        );
    }
}

export default connect(({ dashboardAnalysis, loading }) => ({
    dashboardAnalysis,
    loading: loading.effects['dashboardAnalysis/fetch'],
}))(DashboardAnalysis);
